<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<meta name="author" content="xiaojiangK" />
		<meta name="email" content="740092856@qq.com" />
		<meta name="gitee" content="https://gitee.com/xiaojiangk/" />
		<meta name="viewport" content="width=1200, initial-scale=1.0" />
		<link rel="stylesheet" type="text/css" href="images/css/admin.min.css" />
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<title>admin-upload</title>
	</head>
	<body>
		<div class="demo-main upload">
			<div class="admim-title">
				<h2>Tooltip 开关</h2>
			</div>
			<div class="item">
				<div class="title">
					<h3>基础用法</h3>
				</div>
				<div class="content uploadImg">
					<qx-button type="primary" icon="icon-uploads" upload>上传</qx-button>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>用户头像上传</h3>
				</div>
				<div class="content avatar">
					<i class="iconfont icon-uploadpic">
						<qx-button type="primary" icon="icon-uploads" upload>上传</qx-button>
					</i>
				</div>
			</div>
			<div class="item">
				<div class="title">
					<h3>照片墙</h3>
				</div>
				<div class="content photo">
					<i class="iconfont icon-uploadpic">
						<!-- 达到要求数量，系统默认删除iconfont，请勿随意删除 -->
						<qx-button type="primary" icon="icon-uploads" upload>上传</qx-button>
					</i>
				</div>
			</div>
		</div>

		<div class="attributes">
			<h2>Upload Attributes</h2>
			<table>
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>可选值</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>el</td>
						<td>包含容器的选择器</td>
						<td>string</td>
						<td>—</td>
						<td>—</td>
					</tr>
					<tr>
						<td>type</td>
						<td>上传图片的类型</td>
						<td>string</td>
						<td>avatar / photo</td>
						<td>—</td>
					</tr>
					<tr>
						<td>maxLength</td>
						<td>最大上传数量，仅照片墙有效</td>
						<td>number</td>
						<td>—</td>
						<td>9</td>
					</tr>
					<tr>
						<td>success</td>
						<td>成功的回调函数</td>
						<td>function</td>
						<td>res</td>
						<td>—</td>
					</tr>
				</tbody>
			</table>
			<h2>Upload Event</h2>
			<table>
				<thead>
					<tr>
						<th>事件名称</th>
						<th>说明</th>
						<th>回调参数</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>upload</td>
						<td>上传文件触发的事件</td>
						<td>上传的文件后的返回值</td>
					</tr>
				</tbody>
			</table>
		</div>

		<script src="images/js/jquery.min.js"></script>
		<script src="images/js/admin.min.js"></script>
		<script>
			$('.uploadImg #fileUp').change(function () {
				$(this).upload({
					success: function (res) {
						$.ajax({
							url: 'upload.php', // 请求api
							type: 'POST',
							data: res.formData,
							processData: false,
							contentType: false,
							dataType: 'json',
							async: false,
							complete: function (res) {
								if (res.status == 200 && res.readyState == 4) {
									console.log(res.responseText)
								}
							}
						})
						console.log(res)
					}
				})
			})
			$('.avatar #fileUp').change(function () {
				$(this).upload({
					el: '.avatar', // 容器
					type: 'avatar', // 类型
					success: function (res) {
						console.log(res)
					}
				})
			})
			$('.photo #fileUp').change(function () {
				$(this).upload({
					el: '.photo', // 容器
					maxLength: 2, // 上传数量
					type: 'photo', // 类型
					success: function (res) {
						console.log(res)
					}
				})
			})
		</script>
	</body>
</html>
